import {autorun, computed, observable} from 'mobx';
import {Todo} from "./Todo";

let todoId = 0;

class ObservableTodoStore {
    @observable todos: Todo[] = [];
    @observable pendingRequest = 0;

    constructor() {
        autorun(() => {
            console.log(this.report);
        })
    }

    @computed get completedTodosCount() {
        return this.todos.filter(todo => todo.completed).length;
    }

    @computed get report() {
        if (this.todos.length === 0) return "<none>";
        return `Next todo: "${this.todos[0].task}". Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }

    addTodo(task: string) {
        this.todos.push(<Todo>{id: todoId++, task, completed: false,});
    }
}

const store = new ObservableTodoStore();

export default store